import React, { useEffect, useState } from 'react';
import { Form, InputNumber, Switch, Input, Select, Button, Radio, DatePicker, Table, Modal } from 'antd';
import styles from '../index.module.scss';

interface IProps {
  data?: any; // 配置数据
  modalShow: boolean; // 显隐控制
  setModalShow?: (open: boolean) => void;
  onChange?: (formData: object) =>void; // 数据回调
}

const ConfigModal = (props: IProps) => {

  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState<any>();
  //初始化
  useEffect(() => {
    setOpen(props.modalShow || false)
  }, [props.modalShow])

  useEffect(() => {
    const initDef = {
      indexType: 'default',
      indexId: '10001',
      indexCount: 1,
      indexIsProgress: true,
      indexIsTarget: true
    }
    setFormData(props.data || initDef);
  }, [props.data])


  // 关闭弹框
  const hideModal = () => {
    setOpen(false);
    props.setModalShow && props.setModalShow(false);
  };
  // 确认修改
  const confirmModal = () => {
    console.log('确认提交的数据=',formData)
    props.onChange && props.onChange(formData);
    hideModal();
  };
  const onFormLayoutChange = (changedValues, allValue)=> {
    // 获取表单变化的值
    console.log('form表单数据=',changedValues, allValue)
    setFormData(allValue);
  }
  return <div className={styles.warningpend}>
    <Modal
      title="卡片配置"
      open={open}
      onOk={confirmModal}
      onCancel={hideModal}
      okText="确认"
      cancelText="取消"
    >
      <Form
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 12 }}
        labelAlign={'left'}
        initialValues={formData}
        onValuesChange={onFormLayoutChange}
        layout="horizontal"
        style={{ maxWidth: 600 }}
      >
        <Form.Item label="卡片类别" name="indexType">
          <Radio.Group>
            <Radio.Button value="small">Small</Radio.Button>
            <Radio.Button value="default">Default</Radio.Button>
            <Radio.Button value="large">Large</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="指标id" name="indexId">
          <Input />
        </Form.Item>
        {/* <Form.Item label="Select">
        <Select>
          <Select.Option value="demo">Demo</Select.Option>
          <Select.Option value="demo2">Demo2</Select.Option>
          <Select.Option value="demo3">Demo3</Select.Option>
        </Select>
      </Form.Item> */}
        <Form.Item label="指标个数" name="indexCount">
          <InputNumber max={2} min={0} defaultValue={0} />
        </Form.Item>
        <Form.Item label="是否为进度" name="indexIsProgress">
          <Switch />
        </Form.Item>
        <Form.Item label="是否有目标值" name="indexIsTarget">
          <Switch />
        </Form.Item>
      </Form>
    </Modal>
  </div>

}
export default ConfigModal;
